import { signIn } from "next-auth/react";
import { CheckCircleOutlined } from "@ant-design/icons";
import { Form, Input, Button, Card } from "antd";

const LoginForm = () => {
  const onFinish = (values: any) => {
    const telephone = values.username;
    const password = values.password;
    signIn("credentials", { telephone, password, callbackUrl: "/home" });
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <Card title="鹊起智慧社区系统">
      <Form
        labelCol={{ span: 24 }}
        wrapperCol={{ span: 24 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: "请输入用户名（注册使用的手机号码）",
            },
            { type: "string" },
          ]}
        >
          <Input placeholder="手机号码" />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: "请输入密码" }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
          <Form.Item style={{ display: "inline-flex" }}>
            <Button
              type="primary"
              htmlType="submit"
              icon={<CheckCircleOutlined />}
            >
              登录
            </Button>
          </Form.Item>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default LoginForm;
